<template>
	<el-container v-loading="loading">
		<el-main style="padding:0 20px;">
			<el-table v-if="data" :data="data.items" style="width: 100%">
				<el-table-column prop="name" label="商品信息" min-width="180">
					<template #default="scope">
						<el-row :gutter="5" style="margin-top:20px;">
							<el-col :span="12">
								<el-image :src="scope.row.product.product_image"></el-image>
							</el-col>
							<el-col :span="12">
								<p>{{scope.row.product.product_title}}</p>
								<p>{{scope.row.product_sku.sku_title}}</p>
							</el-col>
						</el-row>
					</template>
				</el-table-column>
				<el-table-column prop="sku_price" label="单价" width="180">
					<template #default="scope">
						<view style="display: flex;flex-direction: column;">
							<view>
								预约金 {{scope.row.item_deposit_amount}}
							</view>
							<view>
								尾款 {{scope.row.item_final_payment_amount}}
							</view>
							<view>
								积分 {{scope.row.item_sku_points}}
							</view>
						</view>
					</template>
				</el-table-column>
				<el-table-column prop="item_sku_quantity" label="数量">
				</el-table-column>
				<el-table-column label="小计">
					<template #default="scope">
						<view style="display: flex;flex-direction: column;">
							<view>
								¥{{(scope.row.item_sku_quantity * scope.row.item_sku_price).toFixed(2)}}
							</view>
							<view>
								{{(scope.row.item_sku_quantity * scope.row.item_sku_points).toFixed(2)}}积分
							</view>
						</view>
					</template>
				</el-table-column>
			</el-table>

			<el-row :gutter="20" style="margin-top:20px;">
				<el-col :span="12">
					<el-descriptions :column="1" border size="small">
						<el-descriptions-item v-if="data.order_address"
							label="手机号">{{data.order_address.contact_phone}}</el-descriptions-item>
						<el-descriptions-item v-if="data.order_address"
							label="收货人姓名">{{data.order_address.contact_name}}</el-descriptions-item>
						<el-descriptions-item label="订单编号">{{data.order_no}}</el-descriptions-item>
						<el-descriptions-item label="核销码" v-if="data.order_coupon_value && !data.order_confirm_at">
							<view
								style="display: flex; justify-content: center; align-items: center;flex-flow: column;">
								<sc-qr-code :text="data.order_coupon_value" :size="120"></sc-qr-code>
								{{data.order_coupon_value}}
							</view>
						</el-descriptions-item>
						<el-descriptions-item label="总金额">
							{{data.order_deposit_amount}} (预约金) + {{data.order_final_payment_amount}}(尾款) =
							{{data.order_payable_amount}}
							(总金额)
						</el-descriptions-item>
						<el-descriptions-item label="总积分">
							{{data.order_points}}
						</el-descriptions-item>
					</el-descriptions>
				</el-col>
				<el-col :span="12">
					<el-descriptions :column="1" border size="small">
						<el-descriptions-item label="订单状态">{{data.status}}</el-descriptions-item>
						<el-descriptions-item label="下单时间">{{data.created_at}}</el-descriptions-item>
						<el-descriptions-item v-if="data.order_paid_at"
							label="支付时间">{{data.order_paid_at}}</el-descriptions-item>
						<el-descriptions-item v-if="data.order_confirm_at"
							label="核销时间">{{data.order_confirm_at}}</el-descriptions-item>
						<el-descriptions-item v-if="data.order_refund_at"
							label="退款时间">{{data.order_refund_at}}</el-descriptions-item>
					</el-descriptions>
				</el-col>
			</el-row>


			<el-row :gutter="20" style="margin-top:20px;">
				<el-col :span="12">
					<el-descriptions :column="1" border size="small"
						v-if="data.order_extra && data.order_extra.exchange && data.order_extra.exchange.points_account">
						<el-descriptions-item label="积分账户">
							{{data.order_extra.exchange.points_account.ctm_name}}
						</el-descriptions-item>
						<el-descriptions-item label="账户卡号">
							{{data.order_extra.exchange.points_account.ctm_code}}
						</el-descriptions-item>
						<el-descriptions-item label="所属门店">
							{{data.order_extra.exchange.points_account.org_name}}
							[机构编号:{{data.order_extra.exchange.points_account.org_code}}]
						</el-descriptions-item>
					</el-descriptions>
				</el-col>
				<el-col :span="12">

				</el-col>
			</el-row>

			<el-row :gutter="20" style="margin-top:20px;"
				v-if="data.order_refund_status=='applied' || data.order_refund_status=='success'">

				<el-col :span="12">
					<el-descriptions :column="1" border size="small">
						<el-descriptions-item label="核销状态">{{data.order_confirm_at?'已核销':'未核销'}}</el-descriptions-item>
						<el-descriptions-item label="退款申请理由">{{data.order_extra.refund_reason}}</el-descriptions-item>
						<el-descriptions-item label="退款申请时间">{{data.order_refund_request_at}}</el-descriptions-item>
						<el-descriptions-item label="退款时间"
							v-if="data.order_refund_at">{{data.order_refund_at}}</el-descriptions-item>
						<el-descriptions-item label="退款单号"
							v-if="data.order_refund_no">{{data.order_refund_no}}</el-descriptions-item>
					</el-descriptions>
				</el-col>

				<el-row style="margin-top:20px;" v-if="data.order_refund_status=='applied'">
					<el-button-group>
						<el-popconfirm :title="'该单【' + (data.order_confirm_at?'已核销':'未核销') +  '】确定退款吗？'"
							@confirm="refundWechat">
							<template #reference>
								<el-button type="primary" size="large">全额退款</el-button>
							</template>
						</el-popconfirm>

						<el-popconfirm :title="'该单确定要重置状态吗？'" @confirm="refundReset">
							<template #reference>
								<el-button type="warning" size="large">重置状态</el-button>
							</template>
						</el-popconfirm>


					</el-button-group>
				</el-row>

			</el-row>

			<div style="height: 100px;">
				&nbsp;
			</div>
		</el-main>
		<el-footer>

		</el-footer>
	</el-container>
</template>

<script>
	export default {
		data() {
			return {
				loading: true,
				data: {},
				activeNames: ['1', '2'],
				typeMap: {
					'info': "info",
					'warn': "warning",
					'error': "error"
				}
			}
		},
		methods: {
			setData(data) {
				this.loading = true
				this.data = data
				setTimeout(() => {
					this.loading = false
				}, 500)
			},
			refundReset() {
				this.$showLoading();
				this.$API.system.order.refundReset.post({
					id: this.data.id,
				}).then(res => {
					this.$alert(res.msg, "提示", {
						type: 'success'
					})
				}).finally(() => {
					this.$hideLoading();
				})
			},
			refundWechat() {
				this.$API.system.order.refundWechat.post({
					order_no: this.data.order_no
				}).then(res => {
					this.$alert(res.msg, "提示", {
						type: 'success'
					})
				})
			}
		}
	}
</script>

<style scoped>
	.code {
		background: #848484;
		padding: 15px;
		color: #fff;
		font-size: 12px;
		border-radius: 4px;
	}
</style>
